<!DOCTYPE html>
<html >
<head>

	<link rel="stylesheet" href="js/dijit/themes/claro/claro.css">
	<style type="text/css">@import "js//dojo/resources/dojo.css";
@import "js//dijit/themes/claro/claro.css";
@import "js//dojox/grid/resources/claroGrid.css";</style>
<script>dojoConfig = {async: true, parseOnLoad: false}</script>
<script src='js/dojo/dojo.js'></script>
<script>

require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale',  'dijit/form/Button',  'dojo/domReady!'],
    function(DataGrid, ItemFileReadStore, stamp, locale, Button){
		var isButtonClick = false;
        function formatter(){
            var w = new Button({
                label: "Click me!",
                onClick: function(e) {
					isButtonClick = true;
					/*
					var items = grid.selection.getSelected();
					if(items.length){
					dojo.forEach(items, function(item){
					 if(item !== null){
                    
                    dojo.forEach(grid.store.getAttributes(item), function(attribute){
                      
                        var value = grid.store.getValues(item, attribute);

							alert('attribute: ' + attribute + ', value: ' + value);
						});
					} 
					
					});
					
					}
					
                    alert("Thanks for all the fish.  ");
					*/
                }
				
            });
            w._destroyOnRemove=true;
            return w;
			
        }
        function formatDate(datum){
            /* Format the value in store, so as to be displayed.*/
            var d = stamp.fromISOString(datum);
            return locale.format(d, {selector: 'date', formatLength: 'long'});
        }

        var layout = [
            {name: 'Index', field: 'id'},
            {name: 'Date', field: 'date', width: 10,
                formatter: formatDate    /*Custom format, change the format in store. */
            },
            {name: 'Message', field: 'message', width: 8,
                formatter: formatter    /*Custom format, add a button. */
            }
        ];

        var store = new ItemFileReadStore({
            data: {
                identifier: "id",
                items: [
                    {id: 1, date: '2010-01-01'},
                    {id: 2, date: '2011-03-04'},
                    {id: 3, date: '2011-03-08'},
                    {id: 4, date: '2007-02-14'},
                    {id: 5, date: '2008-12-26'}
                ]
            }
        });
        var grid = new DataGrid({
            id: 'grid',
            store: store,
            structure: layout,
            autoWidth: true,
            autoHeight: true
        });
        grid.placeAt('gridContainer');
		
		
		grid.on("RowClick", function(evt){
						if(isButtonClick)
						{
							isButtonClick = false;
							var ridx = evt.rowIndex;
							var cidx = evt.cellIndex;
							rowData = grid.getItem(ridx);
							
							alert("rows index:" + ridx + "cell index:" + cidx);
							alert(rowData);
						}
					}, true);
					
        grid.startup();
    });</script>
</head>
<body class="claro">
    <div id="gridContainer" style="width: 100%; height: 200px;"></div>
</body>
</html>